<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: auto;
  max-height: 178px;
  display: block;
  min-width: 178px;
}
</style>
<template>
  <div id>
    <el-upload
      v-if="type != 'file'"
      class="avatar-uploader"
      :action="actionUrl"
      :show-file-list="false"
      :on-success="uploadSuccess"
      :before-upload="beforeAvatarUpload"
      style="text-align: left"
    >
      <img
        v-bind:src="thumbSrc"
        v-if="thumbSrc !='' && thumbSrc !='NULL' && type!= 'file'"
        :class="thumbSrc ? 'imgMargin' : ''"
        :style="{width:width + 'px',height:height + 'px'}"
        class="avatar"
      />
      <i v-else class="el-icon-plus avatar-uploader-icon" style="background-color: white"></i>
    </el-upload>
    <el-upload
      v-if="type == 'file'"
      class="upload-demo"
      :action="fileUrl"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      :on-success="uploadSuccess"
      multiple
      :limit="1"
      :on-exceed="handleExceed"
      :file-list="fileList"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <!--<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
    </el-upload>
  </div>
</template>

<script>
export default {
  name: "uploaderview",
  data() {
    return {
      thumbS: "",
      fileList: [],
      actionUrl: "/Admin/upload/upload?action=uploadimage&filename=file",
      fileUrl: "/Admin/upload/upload?action=uploadfile&filename=file",
      showupload: false
    };
  },
  computed: {
    thumbSrc() {
      let _this = this;
      return _this.thumbS ? _this.thumbS : _this.thumb;
    }
  },
  watch: {
    thumb(val) {
      let _this = this;
      _this.thumbS = _this.thumb;
    },
    file(val) {
      if (val) {
        let _this = this;
        _this.fileList.push({ name: _this.title, url: val });
      }
    }
    // title (val) {
    //     let _this = this;
    //     _this.fileList[0]['name'] = val;
    // }
  },
  methods: {
    beforeAvatarUpload(file) {
      const isJPG = file.type;
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (isJPG != "image/png" && isJPG != "image/jpeg") {
        this.$message.error("上传头像图片只能是 JPG 或 PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    uploadSuccess(e) {
      let _this = this;
      _this.thumbS = e.url;
      _this.$emit("uploader-success", _this.thumbS, _this.index, _this.name);
    },
    handleRemove(file, fileList) {
      let _this = this;
      this.fileList = [];
      _this.$emit("handle-remove", _this.fileList, _this.name);
    },
    handlePreview(file) {
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}？`);
    }
  },
  props: [
    "index",
    "thumb",
    "file",
    "title",
    "type",
    "height",
    "width",
    "name",
    "iconType"
  ]
};
</script>